<template>
	<view class="list">
		<block v-for="item in list" :key="item.id">
			<view class="item">
				<view class="item-box">
					<view class="item-box-image">
						<u-image
							class="image" 
							width="340rpx" 
							height="340rpx" 
							:src="item.url"></u-image>
					</view>
					<view class="item-box-info">
						<view class="title">
							<view class="tag">高级</view>
							<view class="text u-font-lg">{{item.title}}</view>
						</view>
						<view class="info-list">
							<view class="info-item">
								<view class="num u-font-xl">{{item.fans_num}}<text class="u-font-xs">W</text></view>
								<view class="text u-font-sm">粉丝数</view>
							</view>
							<view class="info-item">
								<view class="num u-font-xl">{{item.price}}<text class="u-font-xs">元</text></view>
								<view class="text u-font-sm">达人报价</view>
							</view>
						</view>
						<view class="location">
							<u-image
								class="image" 
								width="30rpx" 
								height="30rpx" 
								src="/static/icons/location_icon.png"></u-image>
							<view class="text">{{item.location}}</view>
						</view>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
export default {
	props: {
		list: {
			type: Array,
			default() {
				return []
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.list {
	display: flex;
	flex-wrap: wrap;
	.item {
		display: flex;
		justify-content: center;
		width: 360rpx;
		height: 590rpx;
		margin-bottom: 20rpx;
		&-box {
			width: 340rpx;
			height: 100%;
			background-color: $u-bg-white-color;
			border-radius: 20rpx;
			overflow: hidden;
			&-image {
				height: 340rpx;
			}
			&-info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 250rpx;
				padding: 20rpx;
				.title {
					display: flex;
					align-items: center;
					color: $u-text-color;
					.tag {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 80rpx;
						height: 36rpx;
						background: linear-gradient(top, #edd094 0%, #e5c17d 100%);
						border-radius: 36rpx;
						font-size: 24rpx;
						margin-right: 10rpx;
					}
					.text {
						flex: 1;
						font-weight: 600;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
				}
				.info-list {
					display: flex;
					align-items: center;
					justify-content: space-between;
					.info-item {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-between;
						height: 74rpx;
						.num {
							font-weight: 600;
							color: $u-text-color;
						}
						.text {
							color: $u-text-light-color;
						}
					}
				}
				.location {
					display: flex;
					align-items: center;
					.image {
						margin-right: 6rpx;
					}
					.text {
						flex: 1;
						color: $u-text-color;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
				}
			}
		}
	}
}
</style>
